Thank you for putting together this PR @benazeer-ben 👍

For the most part it's working pretty well for me. There are a few things we might need to tweak before landing it though.

✅ Global styles apply correctly to the block
✅ Block instance styles override global styles
✅ Box sizing allows parent to control width effectively while borders are present

❓ Default controls - There's a general direction at present that border controls are only displayed by default if the block already had spacing controls e.g. padding/margin, and the spacing controls were displayed by default.

❓ Lack of padding support - Adopting border radius can mean clipping content. Normally this is mitigated somewhat by the user also having control over padding on the block. We might need to expand the scope of this PR to also adopt spacing supports.

Here's what I see when testing this branch:

Thanks again for tackling this, @benazeer-ben, appreciate it!

Thanks for iterating on this one @benazeer-ben 👍

It's very close. All that is missing is to tweak which block support controls are displayed by default.

✅ Global styles apply correctly to the block
✅ Block instance styles override global styles
✅ Box sizing allows parent to control width effectively while borders are present
❓ Controls still need to be hidden by default

Given the Page List block didn't previously have spacing support and is only getting it due to the border radius support, all the controls should be optional i.e. hidden by default.

I've left a couple of tweaks via inline comments. With those applied this is working as expected for me.

Loving the quick turnaround on iterations here @benazeer-ben ⚡

I was giving this a final test and noticed that the box-sizing: border-box CSS is only applied in the editor. We'll need to add it to the blocks styles so parent blocks can still enforce a max width on Page List blocks.

Here's a quick diff you can apply to get the job done:

diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss
index d06a614257..a77fb85903 100644
--- a/packages/block-library/src/page-list/style.scss
+++ b/packages/block-library/src/page-list/style.scss
@@ -15,3 +15,9 @@
 		background-color: inherit;
 	}
 }
+
+.wp-block-page-list {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
+

To test this:

1. Add a Page List block and apply both padding and a border
2. Wrap it in a Group block
3. Set a content width like 300px on the Group block
4. Save and switch to the frontend
5. Note that the Page List should now respect the 300px width applied by the parent Group block.

This is now working for me now after @aaronrobertshaw's suggestion, and that box-sizing: border-box; is applied in styles.scss.

I checked:

• theme.json block styles
• global styles in the site editor for page list block
• block styles

All are working for me.

LGTM as well ✨

✅ Global styles are applied correctly in editor and on frontend
✅ Block support styles override global styles appropriately
✅ Box sizing allows parent block to enforce width

I can confirm the issue from my last review has been resolved. After wrapping a page list in a group block and setting its content width to 250px, this is what I get: